﻿<template>
  <div v-loading="loading" class="problem-detail-container">
    <!-- 题目详情内容 -->
    <div v-if="problem" class="problem-content">
      <!-- 题目头部信息 -->
      <div class="problem-header">
        <div class="header-left">
          <h1 class="problem-title">{{ problem.title }}</h1>
          <div class="problem-meta">
            <el-tag :type="getDifficultyType(problem.difficulty)" size="large">
              {{ problem.difficulty }}
            </el-tag>
            <el-tag type="info" size="large">{{ problem.category }}</el-tag>
            <span class="author">作者: {{ problem.authorName }}</span>
          </div>
        </div>
        <div class="header-right">
          <div class="stats">
            <div class="stat-item">
              <span class="label">通过率</span>
              <span class="value">{{ problem.acceptanceRate }}%</span>
            </div>
            <div class="stat-item">
              <span class="label">提交次数</span>
              <span class="value">{{ problem.submissionCount }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 题目描述 -->
      <el-card class="content-card" shadow="never">
        <template #header>
          <span class="card-title">题目描述</span>
        </template>
        <div class="problem-description">
          <p>{{ problem.description || "暂无描述" }}</p>
        </div>
      </el-card>

      <!-- 输入输出说明 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card class="content-card" shadow="never">
            <template #header>
              <span class="card-title">输入格式</span>
            </template>
            <div class="io-description">
              <p>{{ problem.inputDescription || "暂无输入格式说明" }}</p>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="content-card" shadow="never">
            <template #header>
              <span class="card-title">输出格式</span>
            </template>
            <div class="io-description">
              <p>{{ problem.outputDescription || "暂无输出格式说明" }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 样例 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card class="content-card" shadow="never">
            <template #header>
              <span class="card-title">样例输入</span>
            </template>
            <div class="sample-code">
              <pre>{{ problem.sampleInput || "暂无样例输入" }}</pre>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="content-card" shadow="never">
            <template #header>
              <span class="card-title">样例输出</span>
            </template>
            <div class="sample-code">
              <pre>{{ problem.sampleOutput || "暂无样例输出" }}</pre>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 提示信息 -->
      <el-card v-if="problem.hint" class="content-card" shadow="never">
        <template #header>
          <span class="card-title">提示</span>
        </template>
        <div class="hint-content">
          <p>{{ problem.hint }}</p>
        </div>
      </el-card>

      <!-- 操作按钮 -->
      <div class="action-buttons">
        <el-button type="primary" size="large" @click="handleSubmit">
          <el-icon><Edit /></el-icon>
          开始答题
        </el-button>
        <el-button size="large" @click="handleBack">
          <el-icon><ArrowLeft /></el-icon>
          返回列表
        </el-button>
      </div>
    </div>

    <!-- 错误状态 -->
    <el-empty v-else-if="!loading" description="题目不存在或加载失败">
      <el-button type="primary" @click="handleBack">返回列表</el-button>
    </el-empty>
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from "vue"
import { useRoute, useRouter } from "vue-router"
import { ArrowLeft, Edit } from "@element-plus/icons-vue"
import { useProblemsStore } from "@/stores/modules/problem"
import { getDifficultyType } from "@/utils/business/problem/difficulty"
import { handleError } from "@/utils/core/error-handler"

const route = useRoute()
const router = useRouter()
const problemsStore = useProblemsStore()

// 响应式数据
const localLoading = ref(false)

// 计算属性
const problem = computed(() => problemsStore.currentProblem)
const loading = computed(() => problemsStore.loading || localLoading.value)

// 方法
const fetchProblemDetail = async () => {
  try {
    localLoading.value = true
    const id = route.params.id
    await problemsStore.getProblemById(id)
  } catch (error) {
    handleError(error, {
      message: "获取题目详情失败",
      context: "ProblemDetail"
    })
  } finally {
    localLoading.value = false
  }
}

const handleSubmit = () => {
  const problemId = route.params.id
  router.push(`/problem/solve/${problemId}`)
}

const handleBack = () => {
  router.push("/problemSet")
}

// 生命周期
onMounted(() => {
  fetchProblemDetail()
})
</script>

<style lang="scss" scoped>
.problem-detail-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 400px;
}

.problem-content {
  .problem-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    padding: 24px;
    background: $bg-color-white;
    border-radius: 8px;
    box-shadow: $box-shadow-sm;

    .header-left {
      flex: 1;

      .problem-title {
        font-size: 24px;
        font-weight: 600;
        color: $color-text-primary;
        margin: 0 0 12px 0;
      }

      .problem-meta {
        display: flex;
        align-items: center;
        gap: 12px;

        .author {
          font-size: 14px;
          color: $color-text-secondary;
        }
      }
    }

    .header-right {
      .stats {
        display: flex;
        gap: 24px;

        .stat-item {
          text-align: center;

          .label {
            display: block;
            font-size: 12px;
            color: $color-text-secondary;
            margin-bottom: 4px;
          }

          .value {
            display: block;
            font-size: 18px;
            font-weight: 600;
            color: $color-primary;
          }
        }
      }
    }
  }

  .content-card {
    margin-bottom: 20px;
    border-radius: 8px;

    .card-title {
      font-weight: 600;
      color: $color-text-primary;
    }

    .problem-description,
    .io-description,
    .hint-content {
      line-height: 1.6;
      color: $color-text-secondary;

      p {
        margin: 0;
      }
    }

    .sample-code {
      background: $bg-color-hover;
      border-radius: 4px;
      padding: 12px;

      pre {
        margin: 0;
        font-family: "Courier New", monospace;
        font-size: 14px;
        color: $color-text-primary;
        white-space: pre-wrap;
        word-wrap: break-word;
      }
    }
  }

  .action-buttons {
    margin-top: 32px;
    text-align: center;

    .el-button {
      margin: 0 8px;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .problem-detail-container {
    padding: 12px;
  }

  .problem-header {
    flex-direction: column !important;
    gap: 16px;

    .header-right {
      width: 100%;

      .stats {
        justify-content: center;
      }
    }
  }

  .el-row {
    .el-col {
      margin-bottom: 20px;
    }
  }
}
</style>
